<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">
    <a-form>
      <div v-if="!showAllEvent">
        <a-row v-if="showCustomCheckFksMessage">
          <a-col :span="24">
            <a-form-item labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.customCheckFksMessage') }}
              </template>
              <a-input v-model="customCheckFksMessage"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.qian-chu-li-jiao-ben') }}<ych-help help-code="actionBeforeScriptForJs" style="padding-left: 8px;"></ych-help>
              </template>
<!--              <ych-code-editor-->
<!--                v-model="beforeScript"-->
<!--                language="javascript"-->
<!--                :fullScreen="true"-->
<!--                :show-save="true"-->
<!--                @save="() => $refs.help.save('actionBeforeScriptForJs', beforeScript)"-->
<!--                :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-qian-chu-li-jiao-ben')"-->
<!--                style="min-height: 100px"/>-->
              <ych-script-editor style="height: 200px" v-model="beforeScript" language="javascript" :show-save="true" @save="() => $refs.help.save('actionBeforeScriptForJs', beforeScript)" :minimapEnabled="false"></ych-script-editor>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.hou-chu-li-jiao-ben') }}<ych-help help-code="actionAfterScriptForJs" style="padding-left: 8px;"></ych-help>
              </template>
<!--              <ych-code-editor-->
<!--                v-model="afterScript"-->
<!--                language="javascript"-->
<!--                :fullScreen="true"-->
<!--                :show-save="true"-->
<!--                @save="() => $refs.help.save('actionAfterScriptForJs', afterScript)"-->
<!--                :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-hou-chu-li-jiao-ben')"-->
<!--                style="min-height: 100px"/>-->
              <ych-script-editor style="height: 200px" v-model="afterScript" language="javascript" :show-save="true" @save="() => $refs.help.save('actionAfterScriptForJs', afterScript)" :minimapEnabled="false"></ych-script-editor>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <a-radio-group v-if="showAllEvent" buttonStyle="solid" v-model="formEventType">
        <a-radio-button  value="Js">Js{{beforeScript || afterScript ? ' *' : ''}}</a-radio-button>
        <a-radio-button  value="Java">Java{{beforeJava || afterJava? ' *' : ''}}</a-radio-button>
        <a-radio-button  value="Groovy">Groovy{{beforeGroovy || afterGroovy ? ' *' : ''}}</a-radio-button>
      </a-radio-group>
      <div v-if="showAllEvent && formEventType === 'Js'" style="margin-top: 10px;">
        <a-row v-if="showCustomCheckFksMessage">
          <a-col :span="24">
            <a-form-item labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.customCheckFksMessage') }}
              </template>
              <a-input v-model="customCheckFksMessage"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.qian-chu-li-jiao-ben') }}<ych-help help-code="actionBeforeScriptForJs" style="padding-left: 8px;"></ych-help>
              </template>
<!--              <ych-code-editor-->
<!--                v-model="beforeScript"-->
<!--                language="javascript"-->
<!--                :fullScreen="true"-->
<!--                :show-save="true"-->
<!--                @save="() => $refs.help.save('actionBeforeScriptForJs', beforeScript)"-->
<!--                :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-qian-chu-li-jiao-ben')"-->
<!--                style="min-height: 100px"/>-->
              <ych-script-editor style="height: 200px" v-model="beforeScript" language="javascript" :show-save="true" @save="() => $refs.help.save('actionBeforeScriptForJs', beforeScript)" :minimapEnabled="false"></ych-script-editor>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.hou-chu-li-jiao-ben') }}<ych-help help-code="actionAfterScriptForJs" style="padding-left: 8px;"></ych-help>
              </template>
<!--              <ych-code-editor-->
<!--                v-model="afterScript"-->
<!--                language="javascript"-->
<!--                :fullScreen="true"-->
<!--                :show-save="true"-->
<!--                @save="() => $refs.help.save('actionAfterScriptForJs', afterScript)"-->
<!--                :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-hou-chu-li-jiao-ben')"-->
<!--                style="min-height: 100px"/>-->
              <ych-script-editor style="height: 200px" v-model="afterScript" language="javascript" :show-save="true" @save="() => $refs.help.save('actionAfterScriptForJs', afterScript)" :minimapEnabled="false"></ych-script-editor>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <div v-if="showAllEvent && formEventType === 'Java'" style="margin-top: 10px;">
        <a-row>
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.formDesign.label.qian-chu-li-lei')"  labelAlign="left">
              <a-input v-model="beforeJava" :placeholder="$t('m.eform.appview.other.java_event_tip')"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item :label="$t('m.eform.formDesign.label.hou-chu-li-lei')"  labelAlign="left">
              <a-input v-model="afterJava" :placeholder="$t('m.eform.appview.other.java_event_tip')"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <div v-if="showAllEvent && formEventType === 'Groovy'" style="margin-top: 10px;">
        <a-row>
          <a-col :span="24">
            <a-form-item  labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.qian-chu-li-jiao-ben') }}<ych-help v-if="beforeGroovyHelpCode" :helpCode="beforeGroovyHelpCode" style="padding-left: 8px;"></ych-help>
              </template>
              <ych-code-editor
                v-model="beforeGroovy"
                language="javascript"
                :fullScreen="true"
                :show-save="!!beforeGroovyHelpCode"
                @save="() => $refs.help.save(beforeGroovyHelpCode, beforeGroovy)"
                :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-qian-chu-li-jiao-ben')"
                style="min-height: 100px"
                :disabled="groovyDisabled"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item  labelAlign="left">
              <template slot="label">
                {{ $t('m.eform.formDesign.label.hou-chu-li-jiao-ben') }}<ych-help v-if="afterGroovyHelpCode" :helpCode="afterGroovyHelpCode" style="padding-left: 8px;"></ych-help>
              </template>
              <ych-code-editor
                v-model="afterGroovy"
                language="javascript"
                :fullScreen="true"
                :show-save="!!afterGroovyHelpCode"
                @save="() => $refs.help.save(afterGroovyHelpCode, afterGroovy)"
                :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-hou-chu-li-jiao-ben')"
                style="min-height: 100px"
                :disabled="groovyDisabled"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </a-form>

    <ych-help-util ref="help"></ych-help-util>
  </ych-modal>
</template>

<script>

  import {YchCodeEditor} from '@yuncheng/ych-components'
  import YchHelp from '@/components/ych/YchHelp'
  import {allowEditScript} from '@/api/manage'
  import YchHelpUtil from "../../../../components/ych/ych-helps/YchHelpUtil";
  import YchScriptEditor from "../../../../components/ych/YchScriptEditor";

  export default {
    name: 'ButScriptDialog',
    components:{
      YchCodeEditor,
      YchHelp,
      YchHelpUtil,
      YchScriptEditor,
    },
    data () {
      return {
        title: this.$t('m.common.label.operate'),
        visible: false,
        beforeJava: null,
        afterJava: null,
        beforeScript: null,
        customCheckFksMessage: null,
        showCustomCheckFksMessage: false,
        afterScript: null,
        beforeGroovy:null,
        afterGroovy:null,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        formEventType: 'Js',
        showAllEvent:false,
        groovyDisabled:false,
        beforeGroovyHelpCode:null,
        afterGroovyHelpCode:null
      }
    },
    methods: {
      open (model) {
        if (model.openType === 'handleDel' || model.openType === 'handleBatchDel' || model.openType === 'handleImportXls' || model.openType === 'handleExportXls') {
          this.showAllEvent = true
        } else {
          this.showAllEvent = false
        }
        if (model.openType === 'handleAdd' || model.openType === 'handleAddFlow') {
          this.showCustomCheckFksMessage = true
        } else {
          this.showCustomCheckFksMessage = false
        }
        if (model.openType === 'handleDel' || model.openType === 'handleBatchDel') {
          this.beforeGroovyHelpCode = 'beforeDeleteForGroovy'
          this.afterGroovyHelpCode = 'afterDeleteForGroovy'
        } else if (model.openType === 'handleImportXls') {
          this.beforeGroovyHelpCode = 'beforeImportForGroovy'
          this.afterGroovyHelpCode = 'afterImportForGroovy'
        } else if (model.openType === 'handleExportXls') {
          this.beforeGroovyHelpCode = 'beforeExportForGroovy'
          this.afterGroovyHelpCode = 'afterExportForGroovy'
        } else {
          this.beforeGroovyHelpCode = null
          this.afterGroovyHelpCode = null
        }
        this.beforeScript = model.beforeScript
        this.afterScript = model.afterScript
        this.beforeJava = model.beforeJava
        this.afterJava = model.afterJava
        this.beforeGroovy = model.beforeGroovy
        this.afterGroovy = model.afterGroovy
        this.customCheckFksMessage = model.customCheckFksMessage
        this.visible = true
      },
      handleOk () {
        const model = {
          beforeScript: this.beforeScript,
          afterScript: this.afterScript,
          beforeJava: this.beforeJava,
          afterJava: this.afterJava,
          beforeGroovy:this.beforeGroovy,
          afterGroovy:this.afterGroovy,
          customCheckFksMessage: this.customCheckFksMessage
        }
        this.$emit('selectFinished', model)
        this.visible = false
      },
      handleCancel () {
        this.visible = false
      },
      canEditorGroovy(){
        allowEditScript(true).then(() => {
          this.groovyDisabled = false
        }).catch(()=>{
          this.groovyDisabled = true
        })
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.canEditorGroovy()
      })
    }
  }
</script>
